<template>
    <customer-dialog :show-footer="false" v-model="visible">
        <template #header>
            <div class="flexable v-center auto-grow">
                <i class="fas fa-theater-masks colored-icon space mr-10"></i> Select Theme
            </div>
        </template>

            <div class="scroll-wrapper bordered" style="height: 400px;">
                <ul id="theme-list">
                    <li class="theme-item" data-theme="light"
                        :class="{active: theme === 'light'}"
                        @click="changeTheme ('light')">
                        <a>Light</a>
                    </li>
                    <li class="theme-item" data-theme="dark"
                        :class="{active: theme === 'dark'}"
                        @click="changeTheme ('dark')">
                        <a>Dark</a>
                    </li>
                </ul>
            </div>
    </customer-dialog>
<!--    </div>-->
</template>

<script>
import CustomerDialog from "@/components/customer-dialog.vue";
export default {
    name: 'theme-selector',
    components: {CustomerDialog},
    props: { modelValue: Boolean},
    emits: ['theme-changed', 'update:modelValue'],
    computed: {
        visible: {
            get () { return this.modelValue; },
            set (value) { this.$emit ('update:modelValue', value); }
        }
    },
    data () {
        return {
            theme: ''
        }
    },
    methods: {
        changeTheme (name) {
            this.$emit ('theme-changed', this.theme = name);
        }
    },
    mounted () {
        this.visible = true;
        this.theme = localStorage.getItem ('theme');
    }
};
</script>